<!--
  Generated template for the ConsumptionsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

    <ion-navbar color="primary">
        <ion-title><span class="custom-font-size">{{this.title}}</span></ion-title>
        <ion-buttons end>
            <button ion-button full (click)="showConsumptions()">
                <ion-icon name="clipboard"></ion-icon>
            </button>
            <button ion-button (click)='openCalculatorModal()'>
                <ion-icon name="calculator"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>

</ion-header>

<ion-content padding>
    <ion-item-divider color="secondary">
        <ion-label>ENTRADAS</ion-label>
        <button ion-button clear item-right color="light" (click)="open_list_consumes_in()">
            <ion-icon name="add-circle"></ion-icon>
        </button>
    </ion-item-divider>
    <ion-grid class="my-grid">
        <ion-row>
            <ion-col col-6>
                <span class="bold-header">Producto</span>
            </ion-col>
            <ion-col col-2 text-right>
                <span class="bold-header">Cant.</span>
            </ion-col>
            <ion-col col-2>
                <span class="bold-header">UdM</span>
            </ion-col>
            <ion-col col-2>
                <span class="bold-header">Lote</span>
            </ion-col>
        </ion-row>
        <ion-row *ngFor="let line of consumptions_in" (click)="consume_click(line)">
            <ion-col col-6>
                <span class="col-content">{{line.product_name}}<br>({{line.location_name}})</span>
            </ion-col>
            <ion-col col-2 text-right>
                <span class="col-content">{{line.qty}}</span>
            </ion-col>
            <ion-col col-2>
                <span class="col-content">{{line.uom_name}}</span>
            </ion-col>
            <ion-col col-2>
                <span class="col-content">{{line.lot_name}}</span>
            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-item-divider color="primary">
        <ion-label>SALIDAS</ion-label>
        <button ion-button clear item-right color="light" (click)="open_list_consumes_out()">
            <ion-icon name="add-circle"></ion-icon>
        </button>
    </ion-item-divider>
    <ion-grid class="my-grid">
        <ion-row>
            <ion-col col-6>
                <span class="bold-header">Producto</span>
            </ion-col>
            <ion-col col-2 text-right>
                <span class="bold-header">Cant.</span>
            </ion-col>
            <ion-col col-2>
                <span class="bold-header">UdM</span>
            </ion-col>
            <ion-col col-2>
                <span class="bold-header">Lote</span>
            </ion-col>
        </ion-row>
        <ion-row *ngFor="let line of consumptions_out" (click)="consume_click(line)">
            <ion-col col-6>
                <span class="col-content">{{line.product_name}}<br>({{line.location_name}})</span>
            </ion-col>
            <ion-col col-2 text-right>
                <span class="col-content">{{line.qty}}</span>
            </ion-col>
            <ion-col col-2>
                <span class="col-content">{{line.uom_name}}</span>
            </ion-col>
            <ion-col col-2>
                <span class="col-content">{{line.lot_name}}</span>
            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-item-divider color="dark">
        <ion-label>PRODUCTO TERMINADO (Total = {{sum_finished_products}})</ion-label>
        <button ion-button clear item-right color="light" (click)="add_finished_products()">
            <ion-icon name="add-circle"></ion-icon>
        </button>
    </ion-item-divider>
    <ion-grid class="my-grid">
        <ion-row>
            <ion-col col-6>
                <span class="bold-header">Producto</span>
            </ion-col>
            <ion-col col-2 text-right>
                <span class="bold-header">Cant.</span>
            </ion-col>
            <ion-col col-2>
                <span class="bold-header">UdM</span>
            </ion-col>
            <ion-col col-2>
                <span class="bold-header">Lote</span>
            </ion-col>
        </ion-row>
        <ion-row *ngFor="let line of finished_products" (click)="consume_click(line)">
            <ion-col col-6>
                <span class="col-content">{{line.product_name}}<br>({{line.location_name}})</span>
            </ion-col>
            <ion-col col-2 text-right>
                <span class="col-content">{{line.qty}}</span>
            </ion-col>
            <ion-col col-2>
                <span class="col-content">{{line.uom_name}}</span>
            </ion-col>
            <ion-col col-2>
                <span class="col-content">{{line.lot_name}}</span>
            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-item-divider color="danger">
        <ion-label>SCRAP</ion-label>
        <button ion-button clear item-right color="light" (click)="open_list_consumes_scrapped()">
            <ion-icon name="add-circle"></ion-icon>
        </button>
    </ion-item-divider>
    <ion-grid class="my-grid">
        <ion-row>
            <ion-col col-6>
                <span class="bold-header">Producto</span>
            </ion-col>
            <ion-col col-2 text-right>
                <span class="bold-header">Cant.</span>
            </ion-col>
            <ion-col col-2>
                <span class="bold-header">UdM</span>
            </ion-col>
            <ion-col col-2>
                <span class="bold-header">Lote</span>
            </ion-col>
        </ion-row>
        <ion-row *ngFor="let line of consumptions_scrapped" (click)="consume_click(line)">
            <ion-col col-6>
                <span class="col-content">{{line.product_name}}<br>({{line.location_name}}  ->  {{line.scrap_type_name}})</span>
            </ion-col>
            <ion-col col-2 text-right>
                <span class="col-content">{{line.qty}}</span>
            </ion-col>
            <ion-col col-2>
                <span class="col-content">{{line.uom_name}}</span>
            </ion-col>
            <ion-col col-2>
                <span class="col-content">{{line.lot_name}}</span>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

<ion-footer>
    <ion-toolbar>
        <ion-item>
            <ion-label class="textarea-label">Notas:</ion-label>
            <ion-textarea class="textarea-content" rows=5 (change)="noteChange()" [(ngModel)]="this.consumptions_note" placeholder="Introduzca los comentarios que desee aquí..."></ion-textarea>
        </ion-item>
        <ion-item text-center>
            <ion-buttons color="light">
                <button ion-button round outline icon-end *ngIf="prodData.consumptions_done == false" (click)="confirm_consumptions()">
                    Consumos no confirmados
                    <ion-icon name="thumbs-down"></ion-icon>
                </button>
                <button ion-button round outline icon-end *ngIf="prodData.consumptions_done == true"  (click)="remove_confirm_consumptions()">
                    Consumos confirmados
                    <ion-icon name="thumbs-up"></ion-icon>
                </button>
            </ion-buttons>
        </ion-item>
    </ion-toolbar>
</ion-footer>